import React, { Component } from 'react';
import { connect } from 'react-redux';
import { DetailWrapper, Header,Content} from './style'
import { actionCreator } from './store';
// import { useParams } from 'react-router-dom';


class Detail extends Component {
    render() {
        console.log(this.props);
        return (
            <DetailWrapper>
                <Header>{this.props.title}</Header>
                <Content
                dangerouslySetInnerHTML={{__html: this.props.content}}
                ></Content>
            </DetailWrapper>
        )
    }

    componentDidMount() {
        // const { id } = useParams()
		this.props.getDetail(this.props.match.params.id);
	}
}

const mapState = (state) => ({
    title: state.getIn(['detail', 'title']),
	content: state.getIn(['detail', 'content'])
});

const mapDispatch = (dispatch) => ({
	getDetail(id) {
		dispatch(actionCreator.getDetail(id));
	}
});

export default connect(mapState, mapDispatch)(Detail)
